<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    
    <!-- 初识Vue
        1.想让Vue工作，就必须给Vue实例传入一个配置对象
        2.Vue容器中的代码仍符合HTML规范，只是混入一些Vue的语法
        3.Vue容器中的代码成为Vue模板
          模板解析流程：Vue实例在找到对应容器后，就会把整个容器拿过来，通过语法寻找是否有需要替换的内容，替换好后就会再整个拿回去
     -->

     <!-- 细节补充：
        1.Vue实例和容器是一对一的关系，一个实例只能由一个Vue容器来接管
        2.{{}}里面放的只能是js表达式(能返回一个值出来)
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>
        Hi~ {{name}}
      </h1> 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止 vue 在启动时出现生产提示
    
    const x = new Vue({
        /**
         * 指定当前Vue实例 为哪个元素服务，值的格式通常为css选择器
         * 也可以写成ducument.getElementById('root')
         * 只不过一个是模仿jquery的格式，一个是原生格式
        */
        el:'#root',
        /**
         * 存储数据，为el指定的容器使用，值的格式为暂时先写成一个对象
        */
        data:{
            name:'周杰'
        }
    })
    </script>
</body>
</html>